<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>

		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				padding: 25px;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div class="container-login100">
				<div class="wrap-login100 p-t-85 p-b-20">
					<form id="userform">
						<span class="login100-form-title p-b-70">
							<h5>雨信</h5>
						</span>
						<span class="login100-form-avatar">
							<img id="img_login_face" src="css/registLogin/arrow.jpg" alt="头像">
						</span>

						<div class="wrap-input100 validate-input m-t-85 m-b-35">
							<input class="input100" type="text" id="account" name="account" placeholder="账号">
							<span class="focus-input100"></span>
						</div>

						<div class="wrap-input100 validate-input m-b-50">
							<input class="input100" type="password" id="password" name="password" placeholder="密码">
							<span class="focus-input100"></span>
						</div>
						<div class="container-login100-form-btn">
							<button id="btn-submit" class="login100-form-btn">
								登录/注册
							</button>
						</div>
					</form>

				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/api/chatapi.js"></script>
		<script type="text/javascript">
			mui.plusReady(function() {

				// 判断用户是否注册登录过，如果本地内存有全局的用户对象，此时直接跳转到首页
				let cacheUser = app.getCacheUser();
				if (cacheUser != null) {
					// 页面跳转
					mui.openWindow("index.html", "index.html");
				}

				let btnSubmit = document.getElementById("btn-submit");
				let account = document.getElementById("account");
				let password = document.getElementById("password");

				btnSubmit.addEventListener("tap", function(e) {
					// 判断用户名是否为空，如果为空则让其获得焦点
					if (!app.isNotNull(account.value)) {
						// 获取焦点
						account.focus();
					} else if (!app.isNotNull(password.value)) {
						// 获取焦点
						password.focus();
					} else {
						// 判断用户名和密码的长度，进行限制
						if (account.value.length > 12) {
							app.showToast("用户名不能超过12", "error");
							return false;
						} else if (password.value.length > 12) {
							app.showToast("密码不能超过12", "error");
							return false;
						}

						// 获取每台手机的唯一clientId
						let clientId = plus.push.getClientInfo().clientid;
						let params = {
							account: account.value,
							password: password.value,
							clientId: clientId
						};
						// 调用登录接口
						chatapi.login(params, () => {
							// 页面跳转
							account.blur();
							password.blur();
							mui.openWindow("index.html", "index.html", {}, 'none', 200, () => {
								let webview = plus.webview.getWebviewById('index.html');
								mui.fire(webview, 'show');
							});
						});
					}
					// 阻止默认时间，阻止默认表单提交
					e.preventDefault();
				});
			})
		</script>

	</body>

</html>
